<template>
	<div>
		<template v-if="userInfo.teamId">
			<mu-table :showCheckbox="false" ref="table">
			    <mu-thead>
			    	<mu-tr>
				        <mu-th width="20%">序</mu-th>
				        <mu-th width="50%">岗位名</mu-th>
				        <mu-th>删除</mu-th>
			    	</mu-tr>
			    </mu-thead>
			    <mu-tbody>
			      <mu-tr v-for="(list, i) in jobList">
			        <mu-td>{{i+1}}</mu-td>
			        <mu-td>
						<input type="text" v-model="jobList[i]" class="my-input">
			        </mu-td>
			        <mu-td>
			        	<button class="my-btn danger" @click="jobList.splice(i, 1)">删除</button>
			        </mu-td>
			      </mu-tr>
			    </mu-tbody>
			</mu-table>
			<div class="ml_20 mt_10">
				<mu-raised-button label="新增一条" class="raised-button" backgroundColor="#a4c639" @click="jobList.push('')"/>
				<mu-raised-button label="保存全部" class="raised-button" primary @click="jobSave"/>
			</div>
			<p class="noData">注：修改内容后，必须点击保存全部以完成操作！</p>
		</template>
		
		<template v-else>
			<div class="noData">您必须先加入一个团队才可以使用本功能！</div>
		</template>

		<!-- alertDialog -->
		<alerts-dialog :alertData="alertDialog"></alerts-dialog>
	</div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default {
	data(){
		return {
			alertDialog: {},
			jobList: []
		}
	},
	computed: mapState(['userInfo']),
	methods: {
		//获取职位列表
		get_jobList(){
			let params = {
					teamId: this.userInfo.teamId
				};

			axios.post($base + 'team/teamInfo', params).then(res => {
				this.jobList = res.data.jobList;
			}).catch(err => {
				this.alertDialog = {
					openState: true,
					content: '请求出错，详情请查看控制台'
				}
				console.log(err)
			})
		},
		//保存全部
		jobSave(){
			let params = {
				teamId: this.userInfo.teamId,
				jobList: this.jobList
			}
			axios.post($base + 'team/updateTeamInfo', params).then(res => {
				this.alertDialog = {
					openState: true,
					content: '保存成功！'
				}
			}).catch(err => {
				this.alertDialog = {
					openState: true,
					content: '保存出错，详情请查看控制台'
				}
				console.log(err)
			})
		}
	},
	mounted(){
		this.get_jobList();
	}
}
</script>